<template>
  <div class="cart">
    <!--  导航  -->
    <navbar class="nav-bar">
      <div slot="center">购物车({{cartLength}})</div>
    </navbar>
    <!--  商品列表  -->
    <cart-list></cart-list>
    <!--  底部汇总  -->
    <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>

<script>
import Navbar from 'components/common/navbar/Navbar'
import CartList from './childComps/CartList'
import CartBottomBar from './childComps/CartBottomBar'
import { mapGetters } from 'vuex'
export default {
  name: 'Cart',
  components: {
    Navbar,
    CartList,
    CartBottomBar
  },
  computed: {
    ...mapGetters([
      'cartLength',
      'cartList'
    ])
  }
}
</script>

<style scoped lang="scss">
  .cart{
    height: 100vh;
    .nav-bar{
      background-color: var(--color-tint);
      color: #fff;
    }
  }
</style>
